<template>
	<div class="app-container">
		<div class="header">{{ detail.mailTitle }}</div>
		<div class="tip">
			发送日期：{{ detail.sendTime }}&nbsp;&nbsp;&nbsp;发送人：{{ detail.senderUserName }}&nbsp;&nbsp;&nbsp;类型：{{ detail.mailCategoryName }}
			<br v-if="detail.channelId" /><span v-if="detail.channelId">{{
				detail.mailChannel == '1'
					? '项目日志名称：'
					: detail.mailChannel == '2'
					? '客户日志名称：'
					: detail.mailChannel == '3'
					? '项目名称：'
					: '客户名称：'
			}}</span>
			<span v-if="detail.channelId" style="color: rgb(64, 158, 255); cursor: pointer" @click="linkTo">{{ detail.channelName }}</span>&nbsp;&nbsp;&nbsp;
			<span v-if="detail.channelId">{{
				detail.mailChannel == '1'
					? '项目名称：'
					: detail.mailChannel == '2'
					? '客户名称：'
					: detail.mailChannel == '3'
					? ''
					: ''
			}}</span>
			<span v-if="detail.channelId" style="color: rgb(64, 158, 255); cursor: pointer" @click="linkToOther">{{ detail.projectClientName }}</span>
		</div>
		<div class="row-header">文件下载</div>
		<div class="info-url" v-for="item in detail.mailUrlList" :key="item" @click="downloadFile(item)">
			<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ item }}
		</div>
		<div class="row-header">内容描述</div>
		<div v-html="detail.mailContent"></div>
		<div v-if="detail.appendContent" class="row-header">补充说明</div>
		<div v-if="detail.appendContent" v-html="detail.appendContent"></div>
		<div style="line-height: 80px; height: 80px; padding-left: 35%; margin-top: 20px">
			<el-button @click="reback">返回</el-button>
			<el-button type="primary" @click="back">回复</el-button>
		</div>
	</div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { getInboxMail } from '@/api/email/email'
import useTagsViewStore from '@/store/modules/tagsView'
import { download } from '@/utils/request'
const tagsView = useTagsViewStore()
const route = useRoute()
const router = useRouter()
const detail = ref({})
if (route.query.id) {
	getInboxMail({ inboxId: route.query.id }).then((res) => {
		detail.value = res.data
	})
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
const back = () => {
	router.push({
		path: '/email/emailBack',
		query: {
			channelId: detail.value.channelId,
			customerId: detail.value.customerId,
			mailChannel: detail.value.mailChannel,
			mailCategory: detail.value.mailCategory,
			userName: detail.value.senderUserName,
			sendTime: detail.value.sendTime,
			userId: detail.value.senderUserId,
			mailTitle: detail.value.mailTitle,
			mailContent: detail.value.mailContent ? detail.value.mailContent : detail.value.appendContent
		}
	})
}
const linkTo = () => {
	if (detail.value.mailChannel == 1) {
		router.push({
			path: '/project/viewLog',
			query: {
				id: detail.value.channelId
			}
		})
	} else if (detail.value.mailChannel == 2) {
		router.push({
			path: '/customer/cLogDetail',
			query: {
				logId: detail.value.channelId
			}
		})
	} else if (detail.value.mailChannel == 3) {
		router.push({
			path: '/project/projectDetail',
			query: {
				id: detail.value.channelId
			}
		})
	} else if (detail.value.mailChannel == 4) {
		router.push({
			path: '/customer/customDetail',
			query: {
				id: detail.value.channelId
			}
		})
	}
}
const linkToOther = () => {
	if (detail.value.mailChannel == 1) {
		router.push({
			path: '/project/projectDetail',
			query: {
				id: detail.value.projectClientId
			}
		})
	} else if (detail.value.mailChannel == 2) {
		router.push({
			path: '/customer/customDetail',
			query: {
				id: detail.value.projectClientId
			}
		})
	}
}
const downloadFile = (file) => {
	download({ url: file }).then()
}
</script>
<style lang="scss" scoped>
.header {
	font-size: 24px;
	color: black;
	font-weight: 600;
	text-align: center;
	height: 50px;
	line-height: 50px;
}
.tip {
	height: 60px;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	background-color: rgb(231, 231, 231);
}
.row-header {
	font-weight: 600;
	height: 50px;
	line-height: 50px;
	border-bottom: 2px rgba(240, 240, 240, 1) solid;
	border-top: 2px rgba(240, 240, 240, 1) solid;
	margin-top: 10px;
}
.info-url {
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	background-color: #3f9efe;
	color: #ffffff;
	margin: 5px 0;
	padding-left: 10px;
	cursor: pointer;
}
</style>
